<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="/editor/css/style.css" />
    <link rel="stylesheet" href="/editor/css/editormd.css" />
    <script src="/editor/js/jquery.min.js"></script>
    <script src="/editor/js/editormd.min.js"></script>
    <script src="../../js/vue2.6.js"></script>
    <script src="../../js/element.js"></script>
</head>
<body>

<div id="app">
    <div style="background-color: white;padding: 20px;border-radius: 15px">



        <div style="padding: 20px">

            <el-row>
                <el-col :span="19">
                    <el-form :model="form">
                        <el-input placeholder="请输入标题" v-model="form.title">
                            <template slot="prepend">标题</template>
                        </el-input>
                    </el-form>
                </el-col>
                <el-col :span="5">
                        <el-button type="primary" @click="submitFrom()">提交</el-button>
                </el-col>
            </el-row>

            <br>

            <el-row>
                <el-col :span="12">
                    <el-form :model="form">
                        <el-input placeholder="请输入备注" v-model="form.note">
                            <template slot="prepend">备注</template>
                        </el-input>
                    </el-form>
                </el-col>
            </el-row>

            <br>

            <el-row>
                <el-col :span="12">
                    <div style="float: left">
                        <el-select v-model="form.typeid" placeholder="请选择文章类型">
                            <el-option label="java" value="4"></el-option>
                            <el-option label="springboot" value="5"></el-option>
                        </el-select>
                    </div>
                </el-col>
            </el-row>

            <br><br>
            <div id="test-editormd">
                <textarea id="content-main"  style="display:none;">
                </textarea>
            </div>
            <br><br>
        </div>
    </div>
</div>

<script type="text/javascript">
    var testEditor;

    var Main = {
        data() {
            return{
                form:{},
                formLabelWidth:'120px',
                restaurants: [],
                state: '',
                select: '',
            }
        },
        methods: {
            submitFrom(){
                //获取富文本
                var content=$("#content-main").html();
                var data={'title':this.form.title,'typeid':this.form.typeid,'content':content,'note':this.form.note};
                var result=addtitle(data);
                if(result.code==0){
                    this.$message({
                        message: JSON.stringify(val),
                        type: '添加成功'
                    });
                }
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "/editor/lib/"
        });
    });


    function addtitle(obj) {
       return  urldata('put','/note',obj);
    }

    function urldata(requestObject,url,data) {
        var data1='';
        $.ajax({
            type: requestObject,
            url: url,
            data:data,
            async:false,
            success: function(data) {
                data1=data;
            }
        })
        return data1
    }


</script>
</body>
</html>